
<script>
export default {
    name: "com-collapse", // 折叠筛选
    props: {
        value: {
            type: Boolean,
            default: false,
        },
        showText: {
            type: String,
            default: "展开",
        },
        closeText: {
            type: String,
            default: "收起",
        },
        position: {
            // 展开方向在文字哪侧
            type: String,
            default: "bottom",
        },
        hideControl: {
            // 隐藏控制按钮
            type: Boolean,
            default: false,
        },
    },
    render(h) {
        let controlText = (
            <div class="" style="text-align: center;">
                <a
                    href="javascript:void(0);"
                    class="el-link"
                    on-click={this.onToggleExtend}
                >
                    <span class="el-link--inner">
                        {this.isExtend ? this.closeText : this.showText}
                    </span>
                    <i
                        class={
                            this.isExtend
                                ? "el-icon-arrow-down selectArrow rotate"
                                : "el-icon-arrow-down selectArrow"
                        }
                    ></i>
                </a>
            </div>
        );
        let contentText = (
            <el-collapse-transition>
                <div
                    class="selectPanel"
                    style={this.isExtend ? "display: block;" : "display: none;"}
                >
                    {this.$slots.default}
                </div>
            </el-collapse-transition>
        );

        if (this.hideControl) {
            return <div class="productSelectCollapse">{contentText}</div>;
        }

        if (this.position === "bottom") {
            return (
                <div class="productSelectCollapse">
                    {controlText}
                    {contentText}
                </div>
            );
        } else {
            return (
                <div class="productSelectCollapse">
                    {contentText}
                    {controlText}
                </div>
            );
        }
    },
    data() {
        return {
            isExtend: this.value, // 是否展开
        };
    },
    watch: {
        value() {
            this.isExtend = this.value;
        },
    },
    methods: {
        /**
         * @method 更改展开状态
         */
        onToggleExtend() {
            this.isExtend = !this.isExtend;
            this.$emit("input", this.isExtend);
        },
    },
};
</script>
<style lang="scss" scoped>
.productSelectCollapse {
    .el-link {
        color: #1fd3aa;
    }
    .color-888 {
        color: #888888;
    }
    .selectPanel {
        overflow: hidden;
        transition: height 0.3s;
    }
    .selectArrow {
        transition: transform 0.3s;
    }
    .rotate {
        transform: rotate(180deg);
    }
}
</style>